<template>
	<view class="content">
		<cusHeaderVue titleContent="修改手势密码" :showBack="true"></cusHeaderVue>
		<view class="bgColor">
			<image src="/static/login/xgssmm.png" mode="aspectFill"></image>
		</view>
		<view class="contBox" :style="{paddingTop: `calc(${scrollerHeight} + 150rpx)`}">
			<view class="tit">
				身份验证
			</view>
			<view class="tip">
				请输入登录密码确认本人操作
			</view>
			<view class="tipInpt">
				<input type="text" placeholder="请输入密码" placeholder-style="color: #959BA5;"/>
			</view>
			<view class="btnSubBtn">
				<view class="btnSub">
					确认
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script setup>
	import cusHeaderVue from '@/components/cus-header.vue';
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	const scrollerHeight = ref('');
	//获取状态栏高度
	const getBarHeight = () => {
		uni.getSystemInfo({
			success: function(res) {
				scrollerHeight.value = res.statusBarHeight + 'px'
			}
		});
	}
	onLoad(() => {
		getBarHeight();
	})
</script>

<style lang="scss" scoped> 
.bgColor {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		// background: url('/static/login/loginBg.png') no-repeat center;
		// background-size: 100% 100%;
		z-index: -1;
		width: 100%;
		height: 100vh;

		image {
			width: 100%;
			height: 100%;
		}
	}
	.tit{
		font-weight: 500;
		font-size: 38.46rpx;
		color: #1C2027;
		text-align: center;
	}
	.tip{
		font-size: 25.64rpx;
		font-weight: 400;
		color: #7A7A7A;margin-top: 32rpx;
		text-align: center;
	}
	.tipInpt{
		width: 705.13rpx;
		height: 83.33rpx;
		border-radius: 12.82rpx 12.82rpx 12.82rpx 12.82rpx;
		background: #ffffff;
		margin: 35.26rpx auto 0;
		display: flex;
		align-items: center;
		input{
			flex: 1;
			padding: 0 29.49rpx;
			box-sizing: border-box;
			font-size: 32.05rpx;
			font-weight: 400;
			
		}
	}
	.btnSubBtn{
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom:0;
		left: 0;
		width: 100%;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
		.btnSub{
			width: 512.82rpx;
			height: 80.77rpx;
			border-radius: 40.38rpx 40.38rpx 40.38rpx 40.38rpx;
			background: linear-gradient(-90deg, #feaf38,#f98434);
			box-shadow: 0 3.85rpx 4.49rpx 0 #f984344d;
			font-size: 32.05rpx;
			font-weight: 400;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			
		}
	}
	
</style>